<template>
  <d2-container class="page">
    <div class="form-box">
      <div class="form-item">
        <div class="form-label">事件发生时间：</div>
        <div class="form-input">
          <el-date-picker
            v-model="date"
            type="daterange"
            value-format="yyyyMMdd"
            unlink-panels
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
            @change="changeDateHandle">
          </el-date-picker>
        </div>
      </div>
      <div class="form-item">
        <div class="form-label">事件发生地点：</div>
        <div class="form-input">
          <el-select v-model="params.eventCountry" placeholder="请选择" clearable>
            <el-option
              v-for="(item, index) in locationOptions"
              :key="index"
              :label="item.value"
              :value="item.code">
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="form-item">
        <div class="form-label">事件类型：</div>
        <div class="form-input">
          <el-select v-model="params.reportType" placeholder="请选择" clearable>
            <el-option
              v-for="(item, index) in eventTypeOptions"
              :key="index"
              :label="item.value"
              :value="item.code">
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="form-item">
        <el-button type="primary" @click="searchHandle">查询</el-button>
        <!-- <el-button type="primary">导出</el-button> -->
      </div>
    </div>
    <div id="myChart" class="chart"></div>
  </d2-container>
</template>

<script>
import { mapActions } from 'vuex'

// eslint-disable-next-line no-undef
const echarts = require('echarts')
export default {
  data () {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 6)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 29)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      columns: [],
      values: [],
      date: [],
      // 事件地点option
      locationOptions: [],
      // 事件类型option
      eventTypeOptions: [],
      // 查询表单
      params: {
        startDate: '',
        endDate: '',
        eventCountry: '',
        reportType: ''
      }
    }
  },
  created () {
    const end = new Date()
    const start = new Date()
    start.setTime(start.getTime() - 3600 * 1000 * 24 * 29)
    this.date = [start, end]
    this.params.startDate = this.$dateFormat('yyyyMMdd', start)
    this.params.endDate = this.$dateFormat('yyyyMMdd', end)
    this.getDictionary('country')
    this.getDictionary('event')
  },
  mounted () {
    this.$nextTick(() => {
      this.getIndexData()
    })
  },
  methods: {
    ...mapActions('d2admin/pm.dictionary', [
      'dictLoad'
    ]),
    ...mapActions('d2admin/pm.index', [
      'getAnalysis'
    ]),
    // 获取字典
    getDictionary (type) {
      this.dictLoad({ type }).then(res => {
        if (type === 'country') {
          this.locationOptions = res.country
        }
        if (type === 'event') {
          this.eventTypeOptions = res.event
        }
      })
    },
    // 获取首页数据
    getIndexData () {
      this.getAnalysis(this.params).then(res => {
        this.columns = res.cloumns
        this.values = res.datas
        this.drawLine()
      })
    },
    // 点击搜索按钮
    searchHandle () {
      this.getIndexData()
    },
    // 切换日期
    changeDateHandle (date) {
      console.log('date', date)
      if (date) {
        this.params.startDate = date[0]
        this.params.endDate = date[1]
      } else {
        this.params.startDate = this.$dateFormat('yyyyMMdd', new Date())
        this.params.endDate = this.$dateFormat('yyyyMMdd', new Date())
      }
    },

    // 折线图
    drawLine () {
      let myChart = echarts.init(document.getElementById('myChart'))
      // 绘制图表
      myChart.setOption({
        title: {
          text: '上报事件',
          x: 'center'
        },
        tooltip: {},
        xAxis: {
          data: this.columns
        },
        yAxis: {},
        grid: {
          left: '50px',
          right: '50px'
        },
        series: [{
          name: '上报事件',
          type: 'line',
          symbolSize: 20,
          data: this.values,
          areaStyle: {
            normal: {
              // 填充色渐变
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0, color: 'rgba(58, 167, 255, 0.3)'
                },
                {
                  offset: 0.5, color: 'rgba(58, 167, 255, 0.2)'
                },
                {
                  offset: 1, color: 'rgba(58, 167, 255, 0)'
                }
              ])
            }
          }
        }]
      })
      window.onresize = () => {
        myChart.resize()
      }
    }
    // 文件下载
    // handleFileDownload (name, type) {
    //   const loading = this.$loading({
    //     lock: true,
    //     text: '文件下载中, 请稍候...',
    //     spinner: 'el-icon-loading',
    //     background: 'rgba(0, 0, 0, 0.7)'
    //   })
    //   let url = ''
    //   let headerType = ''
    //   let suffix = ''
    //   if (type === 'excel') {
    //     url = 'pm/export/downloadBusiness'
    //     headerType = 'application/vnd.ms-excel;charset=utf-8'
    //     suffix = '.xlsx'
    //   } else if (type === 'zip') {
    //     url = 'pm/export/downloadVoucherZip'
    //     headerType = 'application/zip'
    //     suffix = '.zip'
    //   }
    //   axios.defaults.headers.baseURL = process.env.VUE_APP_API
    //   axios.defaults.headers.token = util.cookies.get('token')
    //   axios.defaults.headers.Accept = 'application/json'
    //   axios.get(process.env.VUE_APP_API + url + '?jobId=' + this.shopId,
    //     { responseType: 'blob' }
    //   ).then(res => {
    //     if (!res) {
    //       return
    //     }
    //     let blob = new Blob([res.data], { type: headerType })
    //     let url = window.URL.createObjectURL(blob)
    //     let aLink = document.createElement('a')
    //     aLink.style.display = 'none'
    //     aLink.download = name + suffix
    //     aLink.href = url
    //     document.body.appendChild(aLink)
    //     aLink.click()
    //     this.$message.success('下载成功！')
    //     loading.close()
    //   }).catch(error => {
    //     console.log(error)
    //     this.$message.error('下载失败！')
    //     loading.close()
    //   })
    // }
  }
}
</script>

<style lang="scss">
  .page {
    .form-box {
      margin-top: 20px;
      display: flex;
      flex-wrap: wrap;
      .form-item {
        display: flex;
        margin-right: 20px;
        margin-bottom: 20px;
        .form-label {
          width: 120px;
          text-align: right;
          color: #606266;
          line-height: 40px;
        }
      }
    }
    .chart {
      height: 600px;
      width: 100%;
    }
  }
</style>
